<template>
	<view class='rematch-game'>
		<view class="gameType-topTitle-view">
			<view class="gameType-topTitle">
				模拟答题 | Mock Competition
			</view>
			<view class="gameType-line"></view>
		</view>
		<view class='rematch-game-card'>
			<view class='rematch-game-card-num'
				style='background-image: url(../../static/image/fjh/liubianxing.png)'>{{topic.curIndex+1}}
			</view>
			<view class='rematch-game-card-top'>
				<view class="rematch-word-content">
					<text class="rematch-word-title" @click='audioPronounciation'>Word</text>
					<view class="voice-imageback" @click='audioPronounciation'>
						<image v-if='!showPronounciation' src='../../static/image/fjh/voice_small_off.png'
							class='word-iconimg'></image>
						<image v-else src='../../static/image/fjh/voice_bigger.png' class='word-iconimg'>
						</image>
					</view>
				</view>

				<view class="rematch-word-content">
					<text class="rematch-word-title" @click='audioDefinition'>Definition</text>
					<view class="voice-imageback" @click='audioDefinition'>
						<image v-if='!showDefinition' src='../../static/image/fjh/voice_small_off.png'
							class='word-iconimg'></image>
						<image v-else src='../../static/image/fjh/voice_bigger.png' class='word-iconimg'>
						</image>
					</view>
				</view>

				<view class="rematch-word-content">
					<text class="rematch-word-title" @click='audioSentence'>Sentence</text>
					<view class="voice-imageback" @click='audioSentence'>
						<image v-if='!showSentence' src='../../static/image/fjh/voice_small_off.png'
							class='word-iconimg'></image>
						<image v-else src='../../static/image/fjh/voice_bigger.png' class='word-iconimg'>
						</image>
					</view>
				</view>
			</view>
		</view>
		<view class='game-topic-box'>
			<view class='game-topic-input-box'>
				<view class='game-topic-input'>
					{{topic.question}}
					<view class="keyboard-cursor"></view>
				</view>
			</view>
		</view>
		<view class='game-topic-button'>
			<button @click="_handleConfirmTopic" class='game-topic-confirm'>确认</button>
		</view>
	</view>
</template>

<script>
	import util from '../../utils/util';
	export default {
		name: "wordClickGameContentView",
		props: {
			topic: {
				type: Object,
			}
		},
		data() {
			return {
				ReportPromptMsg: '跳过本题后,本题将被计入生词本,是否确定跳过。',
				showReportPromptbox: false,
				showPronounciation: false, //是否显示单词发音状态
				showDefinition: false, //是否显示定义发音状态
				showSentence: false, //是否显示例句发音状态
				canTapPronounciation: true, // 是否可以播放单词
				canTapSentence: true, // 是否可以播放例句
				canTapDefinition: true, // 是否可以播放释义
			};
		},
		mounted() {
			console.log('this.topic', this.topic);
			if (this.topic) {
				this.startTimeDown()
			}
		},
		beforeDestroy() {
			if (this.innerAudioContext) {
				this.handlePlayRadioStop();
			}
		},
		methods: {
			/**
			 * 启动倒计时
			 */
			startTimeDown() {
				this.$emit('startCountdown');
			},
			/**
			 * 暂停播放
			 */
			handlePlayRadioStop() {
				if (this.innerAudioContext) {
					// this.innerAudioContext.stop(() => {
					// 	console.log('暂停音频');
					// });
					this.innerAudioContext.destroy(() => {
						console.log('销毁音频上下文对象');
					})
					this.canTapPronounciation = true;
					this.showPronounciation = false;
					this.showSentence = false;
					this.showDefinition = false;
				}
			},
			//单词发音点击事件
			audioPronounciation() {
				var that = this;
				if (!this.canTapPronounciation) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapPronounciation) {
					this.handlePlayRadioStart(this.topic.purl);
					this.canTapPronounciation = false;
					this.showPronounciation = true;
					this.showSentence = false;
					this.showDefinition = false;
					setTimeout(function() {
						that.canTapPronounciation = true;
					}, 2000);
				}
			},
			/**
			 * 例句发音点击事件 
			 */
			audioSentence(e) {
				var that = this;
				if (!this.canTapSentence) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapSentence) {
					this.handlePlayRadioStart(this.topic.eurl);
					this.canTapSentence = false;
					this.showPronounciation = false;
					this.showSentence = true;
					this.showDefinition = false;
					setTimeout(function() {
						that.canTapSentence = true;
					}, 2000)
				}
			},
			/**
			 * 释义发音点击事件 
			 */
			audioDefinition(e) {
				var that = this;
				if (!this.canTapDefinition) {
					return;
				}
				if (this.innerAudioContext) {
					this.handlePlayRadioStop();
				}
				if (this.canTapDefinition) {
					this.handlePlayRadioStart(this.topic.durl);
					this.canTapDefinition = false;
					this.showPronounciation = false;
					this.showSentence = false;
					this.showDefinition = true;
					setTimeout(function() {
						that.canTapDefinition = true;
					}, 2000)
				}
			},
			/**
			 * 开始播放
			 * url 播放音频地址
			 */
			handlePlayRadioStart(url) {
				// 播放音频
				var that = this;
				const innerAudioContext = uni.createInnerAudioContext()
				this.innerAudioContext = innerAudioContext;
				innerAudioContext.autoplay = true
				var encodeurl = encodeURI(url);
				innerAudioContext.src = encodeurl;
				innerAudioContext.onPlay(() => {
					console.log('开始播放')
				})
				innerAudioContext.onError((res) => {
					console.log('res', res);
					// wx.showToast({
					// 	title: '获取音频失败！',
					// 	icon: 'none',
					// 	duration: 2000
					// })
					// this.setData({
					// 	showPronounciation: false,
					// 	showSentence: false,
					// 	showDefinition: false,
					// })
				})
				innerAudioContext.onEnded((res) => {
					that.showPronounciation = false;
					that.showSentence = false;
					that.showDefinition = false;
				})
				innerAudioContext.onCanplay(() => {})
			},
			_handleConfirmTopic: util.noDoubleClick(function() {
				this.$emit('confirmTopic')
			})
			//提交结果
			// _handleConfirmTopic: util.noDoubleClick(function() {
			// 	this.$emit('confirmTopic')
			// }),
		},
	}
</script>

<style lang="scss" scoped>
	.rematch-game {
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		padding: 20px 10px 10px;
		box-sizing: border-box;
		box-shadow: 3px 3px 10px 3px rgb(160, 160, 160);
	}

	.rematch-game-card-stack-one {
		position: absolute;
		z-index: 1;
		width: 76%;
		height: 50px;
		margin-left: 2%;
		background: #fd947177;
		border-radius: 5px;
	}

	.rematch-game-card-stack-two {
		position: absolute;
		z-index: 100;
		width: 78%;
		margin-left: 1%;
		height: 50px;
		margin-top: 8rpx;
		background: #fd9571;
		border-radius: 5px;
	}

	.rematch-game-card {
		width: 100%;
		margin: 15px;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.rematch-game-card-num {
		text-align: center;
		font-weight: 500;
		line-height: 34px;
		background-repeat: no-repeat;
		background-size: cover;
		width: 39px;
		height: 34px;
		color: #fff;
		margin-top: 10px;
	}

	.rematch-game-card-progress-box {
		margin-top: 8px;
		width: 100%;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.rematch-game-card-progress {
		/* text-align: center;
	    font-size: 32rpx; */
		width: 80%;
	}

	.rematch-game-card-audio-box {
		margin-top: 8px;
		width: 100%;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.rematch-game-card-audio {
		margin-top: 8px;
		width: 69.3px;
		height: 63px;
	}

	.rematch-game-card-bottom {
		margin-top: 20px;
	}

	.rematch-game-topic-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.rematch-game-topic-input {
		height: 40px;
		background: #fff;
		box-shadow: 0px 3px 3px #888888 inset;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.keyboard-cursor {
		width: 2px;
		height: 22.5px;
		background-color: #5382C6;
		border-radius: 1px;
		animation: blinking 1s ease-in-out infinite;
	}

	@keyframes blinking {

		0%,
		100% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}

	.rematch-game-topic-button {
		display: flex;
		align-items: center;
		justify-content: center;
		/* width: 100%;
	    height: 100%; */
	}

	.rematch-game-topic-confirm {
		background: #000;
		color: #fff;
		width: 125px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
	}

	.rematch-word-content {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 35px;
	}

	.rematch-word-title {
		font-size: 23px;
		font-weight: 900;
		color: orange;
		text-shadow: -1px 1px 0px #000, 1px 1px 0px #000;
	}

	.word-iconimg {
		width: 22.5px;
		height: 22.5px;
	}

	.voice-imageback {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20px;
	}
</style>